<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>model</title>
    <script src="https://unpkg.com/vue"></script>
    <style>
        /*v-enter  【表示一个时间点】-->进入之前，元素的起始状态，此时还没有开始进入*/
        /*v-leave-to  【表示一个时间点】-->动画离开之后，离开的终止状态，此时元素动画已经结束*/

        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateY(150px);
        }
        /*v-enter-active  【入场动画时间段】*/
        /*v-leave-active  【离场动画时间段】*/

        .v-enter-active,
        .v-leave-active{
            transition: all 1s ease;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="button" value="toggle" @click="flag = !flag">
    <transition>
    <h3 v-if="flag">这是一个h3</h3>
    </transition>
</div>

</body>
<script>
var vm = new Vue({
    el: '#app',
    data: {
        msg: '大家好哈哈哈哈，你们好啊。',
        flag: true,
    }

})
</script>
</html>